<!--
 * @Author: wangshuguang
 * @Date: 2022-03-15 20:40:40
 * @LastEditTime: 2022-04-14 18:46:37
 * @LastEditors: wangshuguang
 * @Description: 文件描述...
-->
<template>
  <div v-loading="loading" class="sp-page-main">
    <!-- filter start -->
    <div class="leftLine mg-b-20">交易记录</div>
    <el-form ref="filterForm" :model="filterForm" label-width="110px" size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item label="业务单号">
            <el-input
              v-model="filterForm.businessNo"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getTransactionList"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="payTranNo" label="支付单号">
            <el-input
              v-model="filterForm.payTranNo"
              placeholder="请输入"
              clearable
              @keyup.enter.native="submitFilterForm"
            />
          </el-form-item>
        </el-col>
        <div v-show="!optionTxtShow">
          <el-col :span="12">
            <el-form-item prop="businessType" label="业务类型">
              <el-select v-model="filterForm.businessType" placeholder="请选择" class="width100">
                <el-option label="全部" />
                <el-option label="购买流量余额" value="IN" />
                <el-option label="出售流量余额" value="OUT" />
                <el-option label="交易返佣" value="1004" />
                <el-option label="商户开通插件" value="2000" />
                <el-option label="增加合作商户名额" value="2001" />
                <el-option label="恢复超级会员" value="2002" />
                <el-option label="插件年费续费" value="2003" />
              </el-select>
              <!-- <el-input
                v-model="filterForm.businessType"
                placeholder="请输入"
                clearable
                @keyup.enter.native="submitFilterForm"
              /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="rechargeStatus" label="所属插件">
              <!-- <el-select v-model="filterForm.pluginCode" placeholder="请选择" class="width100">
                <el-option label="全部" value="" />
                <el-option label="未使用插件" value="IN" />
                <el-option label="超级会员" value="W" />
                <el-option label="满减满折" value="S" />
                <el-option label="储值AI" value="F" />
              </el-select> -->
              <el-input
                v-model="filterForm.pluginName"
                placeholder="请输入"
                clearable
                @keyup.enter.native="submitFilterForm"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出入账类型">
              <el-select v-model="filterForm.symbolFlowBalance" placeholder="请选择" class="width100">
                <el-option label="出账" value="-" />
                <el-option label="入账" value="+" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出账方名称">
              <el-input
                v-model="filterForm.payerName"
                placeholder="请输入"
                clearable
                @keyup.enter.native="submitFilterForm"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入账方名称">
              <el-input
                v-model="filterForm.payeeName"
                placeholder="请输入"
                clearable
                @keyup.enter.native="submitFilterForm"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="rechargeStatus" label="资金类型">
              <el-select v-model="filterForm.payType" placeholder="请选择" class="width100">
                <el-option label="全部" />
                <el-option label="微信" value="WX" />
                <el-option label="支付宝" value="ZFB" />
                <el-option label="钱包余额" value="WALL" />
                <el-option label="流量钱包余额" value="FWALL" />
              </el-select>
              <!-- <el-input
                v-model="filterForm.payType"
                placeholder="请输入"
                clearable
                @keyup.enter.native="submitFilterForm"
              /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="rechargeStatus" label="状态">
              <el-select v-model="filterForm.rechargeStatus" placeholder="请选择" class="width100">
                <el-option label="全部" />
                <el-option label="交易中" value="W" />
                <el-option label="交易成功" value="S" />
                <el-option label="交易失败" value="F" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="date" label="更新时间">
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd-hh-mm-ss"
                @change="timeChoice"
              />
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="12">
          <el-form-item label=" ">
            <el-button type="primary" round @click="submitFilterForm">搜索</el-button>
            <el-button type="primary" round @click="resetFilterForm">重置</el-button>
            <el-button type="text" @click="optionTxtSwitch">{{ optionTxt }}</el-button>
            <el-button type="text" @click="exportExcel">导出excel</el-button>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <!-- filter end -->

    <!-- 表格 start -->
    <div>
      <el-table :data="list" border stripe size="small">
        <el-table-column label="序号" type="index" align="center" width="60">
          <template slot-scope="scope">
            <span>{{ (paginationConfig.page - 1) * paginationConfig.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="businessNo" label="业务单号" width="200" align="center" />
        <el-table-column prop="payTranNo" label="支付单号" width="200" align="center" />
        <el-table-column prop="businessType" label="业务类型" width="150" align="center" />
        <el-table-column prop="pluginName" label="所属插件" align="center" />
        <el-table-column prop="symbolPayAmount" label="出入账类型" width="100" align="center" />
        <el-table-column prop="payerName" label="出账方" width="150" align="center" />
        <el-table-column prop="payeeName" label="入账方" align="center" />
        <el-table-column prop="payType" label="资金类型" align="center" />
        <el-table-column prop="payAmount" label="交易金额/元" width="100" align="center" />

        <el-table-column prop="rechargeStatusZh" label="状态" align="center" />
        <el-table-column prop="remark" label="备注" width="200" align="center" />
        <el-table-column prop="updateTime" label="更新时间" width="200" align="center" :formatter="dateFormat" />
        <el-table-column label="操作" width="50" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewData(scope.row)">详情</el-button>
          </template>
        </el-table-column>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: center;">
        <el-pagination
          style="margin-top: 10px "
          :current-page.sync="pageNum"
          :page-size.sync="pageSize"
          layout="total, prev, pager, next"
          :total="paginationConfig.total"
          @current-change="handleCurrentChange"
        />
      </div>

    </div>
    <el-drawer
      :title="infoConfig.title"
      :visible.sync="infoVisible"
      size="50%"
      direction="rtl"
    >
      <detail v-if="infoConfig.type == 'detail' && infoVisible" :info-config="infoConfig" />
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dateFtt } from '@/utils'
import detail from './components/detail'
import { transactionList, qryDetail, exportList, qryMarketPlugins } from '@/api/supplement'
import {
  tenantGetFlowBalance
} from '@/api/sp/flow'
import dayjs from 'dayjs'

export default {
  components: { detail },
  props: {
    tabName: {
      type: String,
      default: 'search'
    }
  },
  data() {
    return {
      value1: [],
      optionTxt: '展开高级选项',
      optionTxtShow: true,
      infoVisible: false,
      infoConfig: {
        title: '',
        data: {}
      },
      flowInfo: {},
      // 配置
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      pageNum: 0,
      pageSize: 10,
      loading: false,
      total: 0,
      // 状态
      // 数据
      list: [],
      filterForm: {

      },
      updTimeBegin: '',
      updTimeEnd: '',
      allFilterIds: {
        tags: [] // 所有tags key
      },
      lastFilterIds: {
        tags: [] // 上次tags key
      }
    }
  },
  computed: {
    ...mapGetters(['sidebarMenus', 'activeSidebarMenusCode', 'userInfo', 'agentFlow', 'spInfo', 'fileBaseUrl'])

  },
  mounted() {
    console.log('this.spInfo123', this.spInfo)
    // this.fetchData()
    // this.getFlowData()
    // this.autoShowPay()
    this.getTransactionList()
    // this.fetchList()
    // console.log('打印后', dayjs('20220315165741').format('YYYY-MM-DD HH:mm:ss'))
  },
  methods: {
    fetchList() {
      // const data = {
      //   pageSize: this.pageSize,
      //   pageNum: this.pageNum
      // }
      qryMarketPlugins('0').then(res => {
        console.log('基础数据', res)
        // if (res.code === 0) {
        //   this.list = res.data.list
        //   this.total = res.data.total
        // }
        // return res
      })
    },
    dateFormat(row, column, cellValue, index) {
      if (cellValue === undefined || cellValue === null) {
        return ''
      }
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    timeChoice() {
      console.log('时间选择', this.value1)
      this.filterForm.updTimeBegin = this.value1[0].replaceAll('-', '')
      this.filterForm.updTimeEnd = this.value1[1].replaceAll('-', '')
    },
    handleCurrentChange() {
      this.getTransactionList()
    },
    // 查询交易中心列表
    getTransactionList() {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.filterForm
      }
      transactionList(data).then(res => {
        console.log('查询交易中心列表', res)
        this.list = res.data.list
        this.paginationConfig.total = res.data.total
        this.paginationConfig.page = res.data.pageNum
      })
    },
    optionTxtSwitch() {
      this.optionTxtShow = !this.optionTxtShow
      if (this.optionTxtShow) {
        this.optionTxt = '展开高级选项'
      } else {
        this.optionTxt = '收起高级选项'
      }
    },
    autoShowPay() {
      const { showPay } = this.$route.query
      if (showPay && showPay === 'true') {
        this.editdata()
      }
    },
    // 曙光,这个就是导出的接口⬇⬇⬇
    exportExcel() {
      // 请求参数
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.filterForm
      }
      console.log('exportExcel', data)
      exportList(data).then(res => {
        console.log('下载文件', res)
        this.$downloadFile(res.data, `交易记录-${dayjs(new Date()).format('YYYY年MM月DD日 HH-mm-ss')}`)
      })
    },
    sucClose() {
      this.infoVisible = false
      this.fetchData()
      this.getFlowData()
    },
    close() {
      this.infoVisible = false
    },
    getFlowData() {
      tenantGetFlowBalance({ id: this.spInfo.syncTmpServicerId }).then(res => {
        console.log('res', res)
        this.flowInfo = res.data
      })
    },
    editdata(data) {
      this.infoConfig = {
        type: 'payTent',
        title: '租户充值流量余额',
        data
      }
      this.infoVisible = true
    },
    viewData(data) {
      const obj = { businessNo: data.businessNo }
      // const fun = data.businessType == 'IN' ? tenInDetail : tenOutDetail
      qryDetail(obj).then(res => {
        console.log('res', res)
        const detail = res.data
        this.infoConfig = {
          type: 'detail',
          title: '详情',
          data: {
            ...detail,
            businessType: data.businessType,
            imgArr: [detail.atta1, detail.atta2, detail.atta3]
          }
        }
        this.infoVisible = true
      })
    },
    /**
     * 数据组
     */
    // 获取列表
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 请求参数
      const params = Object.assign({
        userId: this.spInfo.syncTmpServicerId,
        pageNum: page,
        pageSize
      }, this.filterForm)
      // 清除多余字段
      console.log('fetchData', params)
      params.tags = params.tags.includes('') ? [] : params.tags
      for (const key in params) {
        if (this.$isNull(params[key]) || Array.isArray(params[key]) && params[key].length === 0) delete params[key]
      }
      if (params.date && params.date.length) {
        params.updTimeBegin = dateFtt('yyyy-MM-dd 00:00:00', params.date[0])
        params.updTimeEnd = dateFtt('yyyy-MM-dd 23:59:59', params.date[1])
        delete params.date
      }
      // 请求
      this.loading = true
      transactionList(params)
        .then(res => {
          this.list = res.data.list.map(v => {
            return {
              ...v,
              updateTime: dateFtt('yyyy-MM-dd hh:mm:ss', new Date(v.updateTime)),
              payTranNo: v.payTranNo || '-'
            }
          })
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.loading = false
        })
    },

    /**
     * 按钮组
     */
    // 查询
    submitFilterForm() {
      this.getTransactionList()
    },

    // 重置
    resetFilterForm() {
      this.filterForm = this.$options.data().filterForm
      this.getTransactionList()
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.sp-page-main {
  margin-top: 10px;
}
</style>
